<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell center :border="false">
        <div slot="title" class="title">我的频道</div>
        <van-button type="danger" @click="isEdit=!isEdit" round plain size="mini">
            {{isEdit ? '完成' : '编辑' }}
        </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item 
        class="grid-item "
        :class="{active:index===activeChannel}"
          v-for="(value,index) in channel" 

          :key="index" 
          :text="value.name" 
          :icon="(isEdit && index !==0) ? 'close' : '' "
          @click="onUserChannelClick(value,index)"
          />
    </van-grid>

      <!-- 频道推荐 -->
      <van-cell center :border="false">
          <div slot="title"  class="title">频道推荐</div>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item 
           v-for="(value,index) in recommendChannels" 
           :key="index" 
           :text="value.name" 
           @click="onAdd(value)"
            class="grid-item"
           />
      </van-grid>
  </div>
</template>
<script>
import { setItem } from '@/utils/storage'
import { mapState } from 'vuex'
import { getAllChannel,addUserChannel,delectUserChannel } from "@/api/channel.js"
export default {
  name: 'channelEdit',
  components: {  },
  directives: {  },
  props:{
    channel:{
       type:Array,
       required:true
    },
    activeChannel:{
      type:Number,
      required:true
    }
  },
  data() {
    return {
        getAllChannelList:[],//所有频道数据
        isEdit:false //控制编辑的显示状态
    };
  },

  created() {
    this.AllChannel()
  },
  methods: {
    async AllChannel(){
      const {data}=  await getAllChannel()
      this.getAllChannelList=data.data.channels
     },
    async onAdd(channel){
        console.log(channel)
        this.channel.push(channel)
        //数据持久化
        if(this.user){
          //登录了,数据存储到线上
         const {data} =await addUserChannel({
           channels:[
             {id:channel.id,seq:this.channel.length}
           ]
         })
         console.log(data)
        }else{
          //没有登录 数据存储在本地
          setItem('user-channel',this.channel)
        }
     },
     onUserChannelClick(channel,index){
        //编辑 和 切换
        if(this.isEdit && index !==0){
           //编辑 执行删除操作
           this.deleteChannel(channel,index)
        }else{
          //非编辑  切换频道
           this.changeChannel(index)
        }
     },
     //删除
     async deleteChannel(channel,index){
       //如果删除的是当前激活频道之前的频道
       if(index<=this.activeChannel){
           //更新激活频道的索引
           this.$emit('updata-active',this.activeChannel-1)
       }
        this.channel.splice(index,1)
        //持久化
        if(this.user){
           //登录了,持久化到线上
           await  delectUserChannel(channel.id)
        }else{
          //没有登录，持久化到本地
           setItem('user-channel',this.channel)
        }
     },
     //切换
     changeChannel(index){
       //关闭弹出层
        this.$emit('close')
        this.$emit('updata-active',index)
     }
  },
  computed:{
    ...mapState(['user']),
    //所有频道 - 我的频道  = 推荐频道
    //推荐频道
    recommendChannels(){
        //1.遍历所有频道 
        // filter方法：过滤数据，根据方法返回的布尔值 true来收集数据
        // filter方法:查找满足条件的所有元素
        //方法一
        return this.getAllChannelList.filter(channel=>{
           //判断channel是否属于用户频道  取反表示 推荐频道
            return !this.channel.find(userChannel=>{
                 return userChannel.id===channel.id
             })
        })
        //方法二
        // const arr=[]
        // this.getAllChannelList.forEach(item=>{
        //   let flag=false;
        //    for(let i=0;i<this.channel.length;i++){
        //       if(this.channel[i].id===item.id){
        //           //所有的频道中的频道项属于用户频道
        //           flag=true;
        //            break;
        //       }
        //    }
        //    if(!flag){
        //      arr.push(item)
        //    }
        // })
        // return arr
    }
  }
};
</script>
<style lang="less" scoped>
.channel-edit{
  padding-top:54px;
  .title{
    font-size: 16px;
    color: #333333;
  }
 .grid-item{
    width: 80px;
    height: 43px;
     /deep/.van-grid-item__content{
        background-color: #f4f5f6;
        .van-grid-item__text{
          font-size: 14px;
          color: #222;
        }
    }
    /deep/.van-icon {
      position:absolute;
      right: -5px;
      top:-5px;
      font-size: 20px;
      color: #ccc;
    }
  }
  /deep/ .van-grid-item__icon+.van-grid-item__text{
    margin-top: 0;
  }
  .active{
    /deep/ .van-grid-item__text{
        color: red !important;;
      }
   }
}
</style>